<script setup>
import { Upload } from '@element-plus/icons-vue'
import TextEitdor from '@/views/text/TextEitdor.vue'
import { ref, onMounted ,reactive} from 'vue'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import { insertWeek } from '@/api/insertweek'
import { selectAllDep } from '@/api/department'
import { DiGang} from '@/api/attendance'
// 获取当前日期时间
const now = new Date();

// 格式化日期时间为 yyyy-MM-dd HH:mm:ss
function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

const formattedDateTime = formatDate(now);

const userstore = useUserStore()


const form = ref({
  name: userstore.user.name, // 申请人  
  typeDe: '', // 原岗位
  endDe: '', // 调离后的岗位
  description: '', // 申请内容
  status: '1',  //申请状态
})

const ruleForm = ref(null)

const user = userstore.user

const departmentName = ref()

const bumen = reactive({
  selectedId: null // 部门id
})



const optionInfo = ref([])

const type = async () => {
  const res = await selectAllDep()

  optionInfo.value = res.data.data //查出来的集合

  for (let i = 0; i < optionInfo.value.length; i++) {
  // 在这里可以对每个元素进行判断
  
  if (optionInfo.value[i].departmentId === userstore.user.departmentId) {
    departmentName.value  = optionInfo.value[i].departmentName 
    console.log(departmentName.value);
    
  }
}
}




const refresh = () => {
  
  // updateCurrentTime();
  bumen.value = null
  form.value = {
    name: userstore.user.name, // 申请人  
    typeDe: '', // 原岗位
    endDe: '', // 调离后的岗位
    description: '', // 申请内容
    status:1  //默认状态
  }
  ruleForm.value.resetFields();
}

// 表单校验规则
const rules = {

  endDe: [
    { required: true, message: '请选择调离后部门', trigger: 'change' },
  ],
  description: [
    { required: true, message: '请输入请假描述', trigger: 'blur' },
  ],
}

// 组件挂载时初始化数据
onMounted(() => {
  type()
  form.value.applicant = user.id // 设置申请人
  if (user.departmentId) form.value.department = user.departmentId // 设置部门
})

// 提交请假申请
const submitLeave = async () => {
  if (form.value.description !== '<p><br></p>') {
    try {
      await ruleForm.value.validate() // 表单校验
      const res = await DiGang({
          name: userstore.user.name,
          typeDe: departmentName.value,
          endDe : form.value.endDe,
          content: form.value.description,
          status: 1 
      }) // 调用请假接口
      if (res) {
        ElMessage.success('岗位申请提交成功！')
      }
      refresh() // 重置表单
    } catch (error) {
      ElMessage.error('表单校验失败，请检查输入！')
    }
  } else {
    ElMessage.error('岗位描述不能为空！')
  }
}
</script>

<template>
  <el-card>
    <el-button type="primary" style="width: 100px; text-align: center;" @click="refresh">
      重置
    </el-button>
    <h1 style="font-size: 30px; text-align: center; margin-bottom: 20px;">调岗申请</h1>
    
    <el-form
      ref="ruleForm"
      style="max-width: 600px; margin: 0 auto;"
      :model="form"
      :rules="rules"
      label-width="80px"
      class="demo-ruleForm"
      status-icon
    > 

      <!--调岗前类型 -->
      <el-form-item label="原岗位" prop="typeDate">
          <el-input v-model="departmentName" style="width: 150px;" disabled></el-input>
      </el-form-item>


      <!-- 调岗后选择类型 -->
      <el-form-item label="调离岗位" prop="endDe">
          <el-select v-model="form.endDe" placeholder="请选择" style="width: 150px; margin-top: 10px;">
            <el-option v-for="option in optionInfo" :key="option.value" :label="option.departmentName"
              :value="option.departmentName"/>
          </el-select>
      </el-form-item>

      
     
     
      <!-- 请假描述 -->
      <el-form-item label="调岗描述" prop="description">
        <TextEitdor v-model="form.description" />
      </el-form-item>


      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitLeave">
          提交申请
          <el-icon class="el-icon--right"><Upload /></el-icon>
        </el-button>
      </el-form-item>

    </el-form>
  </el-card>
</template>

<style scoped>
.el-card {
  margin: 5px;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

h1 {
  color: #409eff;
  font-weight: bold;
}

.el-button {
  width: 100%;
}
</style>